<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API 管理平台</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#6366f1'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
:where([class^="ri-"])::before {
content: "\f3c2";
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<aside class="w-64 bg-white shadow-sm border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<div class="flex items-center">
<span class="text-xl font-bold text-gray-900 font-['Pacifico']">logo</span>
</div>
</div>
<nav class="flex-1 px-2 py-4">
<ul class="space-y-1">
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-dashboard-line"></i>
</div>
<span>模型管理</span>
<div class="w-5 h-5 flex items-center justify-center ml-auto">
<i class="ri-arrow-right-s-line"></i>
</div>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型生命周期</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型性能评估</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>模型转换适配</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-cpu-line"></i>
</div>
<span>推理服务</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm bg-primary text-white rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-api-line"></i>
</div>
<span>API 接口</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
</div>
<span>数据处理</span>
</button>
</li>
</ul>
</nav>
</aside>
<div class="flex-1 flex flex-col">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<nav class="text-sm text-gray-500">
<span>API 管理平台</span>
<span class="mx-2">/</span>
<span class="text-gray-900">API 管理</span>
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>生产环境</option>
<option>测试环境</option>
<option>开发环境</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
<div class="relative">
<input type="text" placeholder="搜索 API..." class="bg-gray-50 border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-64">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400"></i>
</div>
</div>
<button class="relative p-2 text-gray-400 hover:text-gray-600">
<div class="w-6 h-6 flex items-center justify-center">
<i class="ri-notification-3-line"></i>
</div>
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
</button>
<div class="flex items-center space-x-3">
<img src="https://readdy.ai/api/search-image?query=professional%20business%20portrait%20of%20a%20young%20asian%20software%20engineer%20in%20modern%20office%20setting%2C%20clean%20background%2C%20professional%20lighting%2C%20high%20quality%20headshot&width=40&height=40&seq=user_avatar&orientation=squarish" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
<div class="text-sm">
<div class="text-gray-900 font-medium">张开发</div>
</div>
</div>
</div>
</div>
</header>
<main class="flex-1 overflow-auto">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-900">API 管理</h1>
<p class="text-gray-600 mt-1">管理和监控您的 API 接口</p>
</div>
<button id="createApiBtn" class="bg-primary text-white px-6 py-2 rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-add-line mr-2"></i>
新建 API
</button>
<div id="createApiModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg w-[600px] shadow-xl">
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">新建 API</h3>
<button id="closeApiModal" class="text-gray-400 hover:text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-close-line"></i>
</div>
</button>
</div>
<div class="p-6">
<form id="createApiForm">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">API 名称</label>
<input type="text" name="apiName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入 API 名称">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">API 路径</label>
<input type="text" name="apiPath" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="例如：/api/v1/users">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
<input type="text" name="version" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="例如：v1.0.0">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
<textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入 API 描述"></textarea>
</div>
</div>
</form>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
<button id="cancelApiBtn" class="px-4 py-2 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">取消</button>
<button id="submitApiBtn" class="px-4 py-2 bg-primary text-white rounded-button text-sm hover:bg-blue-600">确定</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-lg">
<i class="ri-bar-chart-line text-blue-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">总调用量</p>
<p class="text-2xl font-bold text-gray-900">2,847,392</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-lg">
<i class="ri-check-line text-green-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">成功率</p>
<p class="text-2xl font-bold text-gray-900">99.8%</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-yellow-100 rounded-lg">
<i class="ri-time-line text-yellow-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">平均响应时间</p>
<p class="text-2xl font-bold text-gray-900">245ms</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-red-100 rounded-lg">
<i class="ri-error-warning-line text-red-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">错误率</p>
<p class="text-2xl font-bold text-gray-900">0.2%</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">API 调用趋势</h2>
</div>
<div class="p-6">
<div id="apiTrendChart" style="height: 300px;"></div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">API 列表</h2>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<label class="text-sm text-gray-600">状态:</label>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>全部</option>
<option>运行中</option>
<option>已停用</option>
<option>维护中</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400 text-sm"></i>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="搜索 API 名称..." class="bg-gray-50 border border-gray-300 rounded-lg pl-8 pr-4 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-48">
<div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400 text-sm"></i>
</div>
</div>
<button id="createApiBtn2" class="bg-primary text-white px-4 py-1 rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-add-line mr-2"></i>
新建 API
</button>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<input type="checkbox" class="custom-checkbox">
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API 名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">版本</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">调用量</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">成功率</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mr-3">
<i class="ri-user-line text-blue-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">用户认证 API</div>
<div class="text-sm text-gray-500">/api/v1/auth/login</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">v1.2.3</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1,247,832</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">99.9%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-green-100 rounded-lg mr-3">
<i class="ri-database-line text-green-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">数据查询 API</div>
<div class="text-sm text-gray-500">/api/v1/data/query</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">v2.1.0</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">892,456</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">99.7%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-10</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-yellow-100 rounded-lg mr-3">
<i class="ri-file-upload-line text-yellow-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">文件上传 API</div>
<div class="text-sm text-gray-500">/api/v1/upload/file</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">v1.5.2</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">维护中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">456,789</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">98.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-08</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-purple-100 rounded-lg mr-3">
<i class="ri-notification-line text-purple-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">消息推送 API</div>
<div class="text-sm text-gray-500">/api/v1/notification/send</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">v1.0.8</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">234,567</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">99.2%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-05</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="custom-checkbox">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-red-100 rounded-lg mr-3">
<i class="ri-shield-line text-red-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">安全验证 API</div>
<div class="text-sm text-gray-500">/api/v1/security/verify</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">v2.0.1</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">已停用</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">156,234</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">97.8%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-12-01</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="text-primary hover:text-blue-700">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-edit-line"></i>
</div>
</button>
<button class="text-gray-400 hover:text-gray-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-eye-line"></i>
</div>
</button>
<button class="text-red-400 hover:text-red-600">
<div class="w-4 h-4 flex items-center justify-center">
<i class="ri-delete-bin-line"></i>
</div>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
显示 1-5 条，共 23 条记录
</div>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
上一页
</button>
<button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">3</button>
<span class="px-2 text-gray-500">...</span>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">5</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-sm text-gray-500 hover:bg-gray-50">
下一页
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<style>
.custom-checkbox {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 0.25rem;
background-color: white;
cursor: pointer;
position: relative;
}
.custom-checkbox:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
left: 3px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
<script id="navigation">
document.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
navItems.forEach(nav => {
nav.classList.remove('active', 'bg-primary', 'text-white');
nav.classList.add('text-gray-600', 'hover:bg-gray-50');
});
this.classList.remove('text-gray-600', 'hover:bg-gray-50');
this.classList.add('active', 'bg-primary', 'text-white');
});
});
});
</script>
<script id="chart">
document.addEventListener('DOMContentLoaded', function() {
const chartDom = document.getElementById('apiTrendChart');
const myChart = echarts.init(chartDom);
const option = {
animation: false,
grid: {
top: 20,
right: 20,
bottom: 40,
left: 60
},
xAxis: {
type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
},
axisLabel: {
color: '#6b7280'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#6b7280'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: 'API 调用量',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: 'rgba(87, 181, 231, 1)',
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(87, 181, 231, 0.3)'
},
{
offset: 1,
color: 'rgba(87, 181, 231, 0.1)'
}
]
}
},
data: [120000, 98000, 145000, 178000, 156000, 189000, 167000]
},
{
name: '成功调用',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: 'rgba(141, 211, 199, 1)',
width: 2
},
data: [119800, 97900, 144700, 177600, 155700, 188600, 166500]
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#e5e7eb',
textStyle: {
color: '#1f2937'
}
},
legend: {
data: ['API 调用量', '成功调用'],
textStyle: {
color: '#6b7280'
}
}
};
myChart.setOption(option);
});
</script>
<script id="checkbox">
document.addEventListener('DOMContentLoaded', function() {
const checkboxes = document.querySelectorAll('.custom-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.parentElement.parentElement.tagName === 'TH') {
const tableCheckboxes = document.querySelectorAll('tbody .custom-checkbox');
tableCheckboxes.forEach(cb => {
cb.checked = this.checked;
});
}
});
});
});
</script>
<script id="modal">
document.addEventListener('DOMContentLoaded', function() {
const createApiBtn = document.getElementById('createApiBtn');
const createApiBtn2 = document.getElementById('createApiBtn2');
const createApiModal = document.getElementById('createApiModal');
const closeApiModal = document.getElementById('closeApiModal');
const cancelApiBtn = document.getElementById('cancelApiBtn');
const submitApiBtn = document.getElementById('submitApiBtn');
const createApiForm = document.getElementById('createApiForm');

function openModal() {
  createApiModal.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  createApiModal.classList.add('hidden');
  document.body.style.overflow = '';
  createApiForm.reset();
}

function addNewApiToList(data) {
  const tbody = document.querySelector('tbody');
  const newRow = document.createElement('tr');
  newRow.className = 'hover:bg-gray-50';
  
  const iconColors = {
    user: ['blue', 'ri-user-line'],
    data: ['green', 'ri-database-line'],
    file: ['yellow', 'ri-file-upload-line'],
    notification: ['purple', 'ri-notification-line'],
    security: ['red', 'ri-shield-line']
  };
  
  const randomIcon = Object.values(iconColors)[Math.floor(Math.random() * Object.values(iconColors).length)];
  
  newRow.innerHTML = `
    <td class="px-6 py-4 whitespace-nowrap">
      <input type="checkbox" class="custom-checkbox">
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      <div class="flex items-center">
        <div class="w-8 h-8 flex items-center justify-center bg-${randomIcon[0]}-100 rounded-lg mr-3">
          <i class="${randomIcon[1]} text-${randomIcon[0]}-600"></i>
        </div>
        <div>
          <div class="text-sm font-medium text-gray-900">${data.apiName}</div>
          <div class="text-sm text-gray-500">${data.apiPath}</div>
        </div>
      </div>
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${data.version}</td>
    <td class="px-6 py-4 whitespace-nowrap">
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">运行中</span>
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">0</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">0%</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date().toISOString().split('T')[0]}</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
      <div class="flex items-center space-x-2">
        <button class="text-primary hover:text-blue-700">
          <div class="w-4 h-4 flex items-center justify-center">
            <i class="ri-edit-line"></i>
          </div>
        </button>
        <button class="text-gray-400 hover:text-gray-600">
          <div class="w-4 h-4 flex items-center justify-center">
            <i class="ri-eye-line"></i>
          </div>
        </button>
        <button class="text-red-400 hover:text-red-600">
          <div class="w-4 h-4 flex items-center justify-center">
            <i class="ri-delete-bin-line"></i>
          </div>
        </button>
      </div>
    </td>
  `;
  
  tbody.insertBefore(newRow, tbody.firstChild);
}

[createApiBtn, createApiBtn2].forEach(btn => {
  if(btn) btn.addEventListener('click', openModal);
});

closeApiModal.addEventListener('click', closeModal);
cancelApiBtn.addEventListener('click', closeModal);

createApiModal.addEventListener('click', function(e) {
  if (e.target === this) {
    closeModal();
  }
});

submitApiBtn.addEventListener('click', function() {
  const formData = new FormData(createApiForm);
  const data = Object.fromEntries(formData.entries());
  
  if (!data.apiName || !data.apiPath || !data.version) {
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg';
    notification.innerHTML = '请填写必填项';
    document.body.appendChild(notification);
    setTimeout(() => {
      notification.remove();
    }, 3000);
    return;
  }

  addNewApiToList(data);
  closeModal();
  
  const successNotification = document.createElement('div');
  successNotification.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg';
  successNotification.innerHTML = 'API 创建成功';
  document.body.appendChild(successNotification);
  setTimeout(() => {
    successNotification.remove();
  }, 3000);
});
});
</script>
</body>
</html>